import { Vector3 } from '@babylonjs/core/Maths/math';
import { Stage } from '../../../base/stage';
import { CreateUINode, UINode } from '../../../gui/base/ui-node';
import { IUIContainerToolOptions } from '../ui-container-tool';
import { OperationGuideType } from './operation-guide-type';
import { CreateScrollGuideItemList } from './scroll-guide-item-list';
import { GuideItemsPc } from './guide-items-pc';
import { AbstractGuideItems } from './abstract-guide-items';
import { IGuideItemOptions } from './guide-item';
import { Utils } from '../../../tool/utils';
import { WebXRCamera } from '@babylonjs/core/XR/webXRCamera';
import { GuideItemsMobile } from './guide-items-mobile';
import { GuideItemsImmersive } from './guide-items-immersive';


/**
 * 操作指导
 */
class OperationGuide {

    private static _stage: Stage;
    private static _operationTypes: OperationGuideType[];
    private static _nodeNormal: UINode;
    private static _nodeImmersive: UINode;
    private static _display: boolean = false;

    /**
     * ui节点（非沉浸模式的和沉浸模式的，未经初始化则为null）
     */
    public static get nodes(): UINode[] | null {
        return this._nodeNormal ? [this._nodeNormal, this._nodeImmersive] : null;
    }

    /**
     * 获取操作指导是否显示
     */
    public static get display(): boolean {
        return this._display;
    }

    /**
     * 设置操作指导是否显示
     */
    public static set display(show: boolean) {
        this._display = show;
        if (this._display) {
            const immersive = this._stage.mainCamera instanceof WebXRCamera;
            this._nodeImmersive.display = immersive;
            this._nodeNormal.display = !immersive;
        } else {
            this._nodeNormal.display = false;
            this._nodeImmersive.display = false;
        }
    }

    /**
     * 初始化操作指导
     * @param stage 舞台
     * @param style ui容器参数对象
     * @param types 要包含的操作类型
     */
    public static initialize(stage: Stage, style: IUIContainerToolOptions, types: OperationGuideType[]): void {
        this._stage = stage;
        this._operationTypes = types;
        this._nodeNormal = this.initializeNode('normal', stage, style, this.getGuideItemsNormal());
        this._nodeImmersive = this.initializeNode('immersive', stage, style, this.getGuideItemsImmersive());
        this.display = false;
    }

    private static getGuideItemsNormal(): AbstractGuideItems {
        const isPc = Utils.isPC();
        if (isPc) {
            return new GuideItemsPc(this._operationTypes);
        } else {
            return new GuideItemsMobile(this._operationTypes);
        }
    }

    private static getGuideItemsImmersive(): AbstractGuideItems {
        return new GuideItemsImmersive(this._operationTypes);
    }

    private static initializeNode(name: string, stage: Stage, style: IUIContainerToolOptions, guideItems: AbstractGuideItems): UINode {

        const gi = guideItems;
        const items: Array<{ name: string, option?: IGuideItemOptions }> = [];
        for (let i = 0; i < gi.items.length; i++) {
            items.push({
                name: name + '-guide-item-option-' + i,
                option: gi.items[i],
            });
        }

        const node = CreateUINode(name + '-operation-guide', stage.mainScene, {
            anchor: new Vector3(1, 0.5, 0),
            offset: new Vector3(-0.01, 0, 0),
            lockToCamera: true,
            display: false,
            xrRatio: { x: 0.7, y: 1 },
        }, [
            CreateScrollGuideItemList(name + '-operation-guide-item-list', stage.mainScene,
                {
                    ...gi.scrollOptions,
                    backgroundRenderingGroupId: style.backRenderingId!,
                    blockRenderingGroupId: style.frontRenderingId!,
                },
                items)
        ]);

        return node;
    }

}


export { OperationGuide };